<template>
	<div>
		<Card :bordered="false" class="card_jianli"  style="height:150px;margin-top: 20px;padding: 20px 20px;" v-show="myself_info1">
			<div class="myself_info">
				<div class="myself_info_img">
					<img src="../../../../../static/img/res_img/123.gif" v-show="man">
					<img src="../../../../../static/img/res_img/321.gif" v-show="woman">
				</div>
				<div class="myself_info_right">
					<div class="myself_info_name">
						<span class="name_myself" >{{myname}}</span>
						<i-button  shape="circle" icon="ios-search" style="float: right;" @click="handleInfoClick"></i-button>
					</div>
					<div class="myself_info_company">
						{{mypostion}} - {{mycompany}}
					</div>
					<div class="myself_info_adress">
						{{mycity}}  |  {{myindustry}}  |  {{myworktime}}年
					</div>
				</div>
			</div>
		</Card>
				 <Card :bordered="false" class="card_jianli"  style="height:380px;margin-top: 20px;padding: 20px 20px;" v-show="myself_info2">
					<div class="myself_info1">
						<div class="myself_left" style="width: 18%;">
							<img src="../../../../../static/img/res_img/123.gif" v-show="s_man">
							<img src="../../../../../static/img/res_img/321.gif" v-show="s_woman">
							<div style="padding-left: 20px;">
							<!--<Upload 
				                multiple
							    ref="upload"
							    :before-upload="handleUpload"
							    :show-upload-list="false"
							    :on-success="uploadSuccess"
							    action="//jsonplaceholder.typicode.com/posts/">
							    <Button type="ghost" icon="ios-cloud-upload-outline">浏览</Button>
							</Upload>-->
								<a>修改</a>
								<a @click="delePhonte">删除</a>
							</div>
						</div>
						<div class="myself_right" style="margin-left: 30px;">
							<ul  class="add_work_experience">
									<li>
										姓名：<span style="visibility: hidden;">小马</span>
										<i-input v-model="s_name" placeholder="请输入您的姓名..." maxlength="5" style="width: 80%"></i-input>
									</li>
									<li>
										性别：<span style="visibility: hidden;">苏苏</span>
										  <RadioGroup v-model="s_sex">
									        <Radio label="男"></Radio>
									        <Radio label="女"></Radio>
									    </RadioGroup>
									</li>
									<li>
										公司名称：
										<i-input v-model="s_company" placeholder="请输入公司名称..." maxlength="20" style="width: 80%"></i-input>
									</li>
									<li>
										当前行业：
										<i-input v-model="s_industry" placeholder="请输入当前行业..." style="width: 80%"></i-input>
									</li>
									<li>
										<div class="work_experience1">
											<div class="work_experience11">
												工作日期：
											   <Col span="12">
										            <DatePicker :options="eTimeOptions" :maxlength="20"  @on-change="eTimeChange" type="date" v-model="s_time"
								            					placement="bottom-end" placeholder="结束时间" style="width: 60%"></DatePicker>
										        </Col>
											</div>
											<div class="work_experience11">
												职位名称：
												<i-input v-model="s_postion" placeholder="请输入当前职位..." style="width: 60%"></i-input>
											</div>
										</div>
									</li>
									<li>
										当前城市：
										 <i-input v-model="s_adress" placeholder="请输入当前城市..." style="width: 80%"></i-input>
									</li>
								</ul>
								<div class="basic_data_foot">
									<i-button type="primary" style="width: 100px; margin-right: 50px;" @click="handleInfoSurelClick">保存</i-button>
								    <i-button style="width: 100px;"  @click="handleInfoCancelClick">取消</i-button>
							    </div>
						</div>
					</div>
				</Card>
			
		<Modal
	        v-model="s_d"
	        title="确认信息"
	        @on-ok="ok"
	        @on-cancel="cancel">
	        <p style="text-align: center;">注意：您确定要删除照片吗？</p>
   		</Modal>
	</div>
</template>
<script>
	import axios from 'axios'
	export default {
    	name: 'Self',
        data () {
            return {
               man:true,
               woman:false,
               s_man:true,
               s_woman:false,
               myself_info1:true,
               myself_info2:false,
               s_d:false,
               myname:"",
               mypostion:"",
               mycompany:"",
               mycity:"",
               myindustry:"",
               myworktime:"",
               sex:"",
               s_name:"",
               s_sex:"",
               s_company:"",
               s_industry:"",
               s_time:"",
               s_postion:"",
               s_adress:""
            }
        },
        methods:{
        	load (){
			  axios.get('/static/mzx/detail.json').then(this.getCityInfoSucc)
			},
			getCityInfoSucc(res){
				res = res.data
				if(res.data){
					this.ListData = res.data.Self
					this.myname=this.ListData.name
					this.sex=this.ListData.sex
	            	this.mycompany=this.ListData.company
	            	this.myindustry=this.ListData.industry
	            	this.myworktime=this.ListData.dat
	            	this.mypostion=this.ListData.positione
	            	this.mycity=this.ListData.adress
	            	if(this.sex == "男"){
	            		this.man=true,
               			this.woman=false
	            	}else{
	            		this.man=false,
               			this.woman=true
	            	}
				}
			},
        	handleInfoClick(){
        		this.s_name=this.ListData.name
				this.s_sex=this.ListData.sex
            	this.s_company=this.ListData.company
            	this.s_industry=this.ListData.industry
            	this.s_time=this.ListData.dat
            	this.s_postion=this.ListData.positione
            	this.s_adress=this.ListData.adress
        		if(this.s_sex == "男"){
	            		this.s_man=true,
               			this.s_woman=false
	            	}else{
	            		this.s_man=false,
               			this.s_woman=true
	            	}
        		this.myself_info1 = false,
            	this.myself_info2 = true
        	},
			handleInfoCancelClick(){
				this.myself_info1 = true,
            	this.myself_info2 = false
			},
			handleInfoSurelClick(){
				this.myself_info1 = true,
				this.myself_info2 = false
			},
			delePhonte(){
				this.s_d = true
			},
			ok () {
                this.$Message.info('点击了确定');
            },
            cancel () {
                this.$Message.info('点击了取消');
            }
		},
		mounted () {
			this.load();
		}
    }
</script>

<style>
	.myself_info_img{
		display: inline-block;
		width: 18%;
	}
	.myself_info_right{
		display: inline-block;
		width:81% ;
		height: 100px;
	    position: relative;
	    top: -25px;
	}
	.name_myself{
		font-size: 26px;
	}
	.myself_info_company{
		position: relative;
    	bottom: -15px;
	}
	.myself_info_adress{
		font-size: 12px;
		color: #999999;
		position: relative;
   		bottom: -20px;
	}
	.myself_info1{
		display: flex;
	}
	.add_work_experience{
		list-style: none;
	}
	.add_work_experience>li{
		margin-top: 15px;
	}
	.work_experience1{
		display: flex;
	}
	.work_experience11{
		width: 50%;
	}
</style>